{{-- 继承布局模板 --}}
@extends( 'official_website.layouts.main' )

@section('keywords')
    <meta name="keywords" content="人脸识别技术，人脸检测技术，人脸数据采集，人脸特征点定位，面部表情识别，形体智能，AR美妆镜，魔妆镜，虚拟试妆，美妆新零售，美妆智慧店"/>
@endsection()

{{--  当前页面的样式表 --}}
@section('style')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/core_technology.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/magic_mirror.css') }}">
@endsection()


{{-- 插入标题 --}}
@section('title')
    <title>人脸识别技术，人脸检测技术，人脸数据采集，人脸特征点定位，面部表情识别，形体智能，AR美妆镜，魔妆镜，虚拟试妆，美妆新零售，美妆智慧店-广州帕克西软件开发有限公司</title>
@endsection

@section('content')
    <section class="banner magic_mirror">

    </section>

    <!-- 页面导航 -->
    <section class="navigation">
        <ul class="navigation-list bym-not-list bym-wrapper clearfix">
            <li class="navigation-list-item">
                <a href="#introduction">
                    <i class="item-icon">
                        <img src="//panx-website.gz.bcebos.com/images/technology/magic_mirror/icon-navigation-introduction.png"
                             alt="">
                    </i>
                    <p class="item-name">@lang('technology/magic_mirror.navigation.0')</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#function">
                    <i class="item-icon">
                        <img src="//panx-website.gz.bcebos.com/images/technology/magic_mirror/icon-navigation-function.png"
                             alt="">
                    </i>
                    <p class="item-name">@lang('technology/magic_mirror.navigation.1')</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#advantage">
                    <i class="item-icon">
                        <img src="//panx-website.gz.bcebos.com/images/technology/magic_mirror/icon-navigation-advantage.png"
                             alt="">
                    </i>
                    <p class="item-name">@lang('technology/magic_mirror.navigation.2')</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#scene">
                    <i class="item-icon">
                        <img src="//panx-website.gz.bcebos.com/images/technology/magic_mirror/icon-navigation-scenario.png"
                             alt="">
                    </i>
                    <p class="item-name">@lang('technology/magic_mirror.navigation.3')</p>
                </a>
            </li>
        </ul>
    </section>

    <!-- 产品介绍 -->
    <div class="introduction clearfix magic_mirror" id="introduction">
        <div class="introduction-header border-line">
            @lang('technology/magic_mirror.navigation.0')
        </div>
        <div class="introduction-thumb">
            <img src="//panx-website.gz.bcebos.com/images/technology/magic_mirror/product_mirror_img.png" alt="">
        </div>
        <div class="introduction-section">
            <p class="introduction-section-sub">@lang('technology/magic_mirror.introduction.sub_title')</p>
            <h3 class="introduction-section-title">
                @lang('technology/magic_mirror.introduction.title')
            </h3>
            <p class="introduction-section-text">
                @lang('technology/magic_mirror.introduction.content')
            </p>
        </div>
    </div>
    <!-- 产品介绍 end -->

    <!-- 功能 -->
    <section class="function" id="function">
        <div class="function-header border-line">
            @lang('technology/magic_mirror.navigation.1')
        </div>

        <!-- Swiper -->
        <div class="function-content">
            <div class="swiper-container" id="function_swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h4 class="item-number">@lang('technology/magic_mirror.function.0.number')</h4>
                            <div class="item-picture">
                                <img src="//panx-website.gz.bcebos.com/images/technology/magic_mirror/jiance_mirror_img.png"
                                     alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">@lang('technology/magic_mirror.function.0.title')</h4>
                                <p class="item-text-summary">@lang('technology/magic_mirror.function.0.summary')</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">@lang('technology/magic_mirror.function.0.number')</h4>
                                <h6 class="item-text-en">@lang('technology/magic_mirror.function.0.subtitle')</h6>
                                <h5 class="slide-cotnent-title">@lang('technology/magic_mirror.function.0.title')</h5>
                                <p class="slide-cotnent-desc">
                                    @lang('technology/magic_mirror.function.0.description')
                                </p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>

                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h4 class="item-number">@lang('technology/magic_mirror.function.1.number')</h4>
                            <div class="item-picture">
                                <img src="//panx-website.gz.bcebos.com/images/technology/magic_mirror/shizhuang_mirror_img.png"
                                     alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">@lang('technology/magic_mirror.function.1.title')</h4>
                                <p class="item-text-summary">@lang('technology/magic_mirror.function.1.summary')</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">@lang('technology/magic_mirror.function.1.number')</h4>
                                <h6 class="item-text-en">@lang('technology/magic_mirror.function.1.subtitle')</h6>
                                <h5 class="slide-cotnent-title">@lang('technology/magic_mirror.function.1.title')</h5>
                                <p class="slide-cotnent-desc">
                                    @lang('technology/magic_mirror.function.1.description')
                                </p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>

                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h4 class="item-number">@lang('technology/magic_mirror.function.2.number')</h4>
                            <div class="item-picture">
                                <img src="//panx-website.gz.bcebos.com/images/technology/magic_mirror/tuijian_mirror_img.png"
                                     alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">@lang('technology/magic_mirror.function.2.title')</h4>
                                <p class="item-text-summary">@lang('technology/magic_mirror.function.2.summary')</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">@lang('technology/magic_mirror.function.2.number')</h4>
                                <h6 class="item-text-en">@lang('technology/magic_mirror.function.2.subtitle')</h6>
                                <h5 class="slide-cotnent-title">@lang('technology/magic_mirror.function.2.title')</h5>
                                <p class="slide-cotnent-desc">
                                    @lang('technology/magic_mirror.function.2.description')
                                </p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>

                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h4 class="item-number">@lang('technology/magic_mirror.function.3.number')</h4>
                            <div class="item-picture">
                                <img src="//panx-website.gz.bcebos.com/images/technology/magic_mirror/shejiao_mirror_img.png"
                                     alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">@lang('technology/magic_mirror.function.3.title')</h4>
                                <p class="item-text-summary">@lang('technology/magic_mirror.function.3.summary')</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">@lang('technology/magic_mirror.function.3.number')</h4>
                                <h6 class="item-text-en">@lang('technology/magic_mirror.function.3.subtitle')  </h6>
                                <h5 class="slide-cotnent-title">@lang('technology/magic_mirror.function.3.title')</h5>
                                <p class="slide-cotnent-desc">
                                    @lang('technology/magic_mirror.function.3.description')
                                </p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>

                </div>
            </div>
        </div>
    </section>
    <!-- 功能 END -->

    <!-- 产品优势 -->
    <section class="magic_mirror_advantage" id="advantage">

        <div class="bym-wrapper">

            <div class="advantage-header border-line">
                @lang('technology/magic_mirror.navigation.2')
            </div>
            
            <div class="magic_mirror_advantage-list">

                <div class="list-item">

                    <i class="item-icon">
                        <img src="//panx-website.gz.bcebos.com/images/technology/magic_mirror/keliu_mirror_icon.png" title=""/>
                    </i>
                    <h4 class="item-title">@lang('technology/magic_mirror.advantage.0.title')</h4>
                    <p class="item-desc item-border">
                        @lang('technology/magic_mirror.advantage.0.description')
                    </p>

                </div>
                <div class="list-item">
                    <i class="item-icon">
                        <img src="//panx-website.gz.bcebos.com/images/technology/magic_mirror/xiaolv_mirror_icon.png" title=""/>
                    </i>
                    <h4 class="item-title">@lang('technology/magic_mirror.advantage.1.title')</h4>
                    <p class="item-desc item-border">@lang('technology/magic_mirror.advantage.1.description')</p>
                </div>
                <div class="list-item">
                    <i class="item-icon">
                        <img src="//panx-website.gz.bcebos.com/images/technology/magic_mirror/chengjiao_mirror_icon.png" title=""/>
                    </i>
                    <h4 class="item-title">@lang('technology/magic_mirror.advantage.2.title')</h4>
                    <p class="item-desc">
                        @lang('technology/magic_mirror.advantage.2.description')</p>
                </div>
                <div class="list-item">
                    <i class="item-icon">
                        <img src="//panx-website.gz.bcebos.com/images/technology/magic_mirror/chengben__mirror_icon.png" title=""/>
                    </i>
                    <h4 class="item-title">@lang('technology/magic_mirror.advantage.3.title')</h4>
                    <p class="item-desc item-border">
                        @lang('technology/magic_mirror.advantage.3.description')</p>
                </div>
                <div class="list-item">
                    <i class="item-icon">
                        <img src="//panx-website.gz.bcebos.com/images/technology/magic_mirror/kucun__mirror_icon.png" title=""/>
                    </i>
                    <h4 class="item-title">@lang('technology/magic_mirror.advantage.4.title')</h4>
                    <p class="item-desc item-border">
                        @lang('technology/magic_mirror.advantage.4.description')</p>
                </div>
                <div class="list-item">
                    <i class="item-icon">
                        <img src="//panx-website.gz.bcebos.com/images/technology/magic_mirror/guanli__mirror_icon.png" title=""/>
                    </i>
                    <h4 class="item-title">@lang('technology/magic_mirror.advantage.5.title')</h4>
                    <p class="item-desc">
                        @lang('technology/magic_mirror.advantage.5.description')</p>
                </div>

            </div>

        </div>

    </section>
    <!-- 产品优势 end-->
    
    <!-- 应用场景 -->
    <section class="magic_mirror_scene" id="scene">

        <div class="bym-wrapper">

            <div class="scene-header border-line">
                @lang('technology/magic_mirror.navigation.3')
            </div>
            
            <div class="magic_mirror_scene-list">

                <div class="list-item first">

                    <div class="item-content">
                        <h4 class="item-title">@lang('technology/magic_mirror.scene.list.0')</h4>
                    </div>

                </div>
                <div class="list-item second">

                    <h4 class="item-title">@lang('technology/magic_mirror.scene.list.1')</h4>     

                </div>
                <div class="list-item third">

                    <h4 class="item-title">@lang('technology/magic_mirror.scene.list.2')</h4>

                </div>
                <div class="list-item four">

                    <h4 class="item-title">@lang('technology/magic_mirror.scene.list.3')</h4>

                </div>
                <div class="list-item five">

                    <h4 class="item-title">@lang('technology/magic_mirror.scene.list.4')</h4>

                </div>
                <div class="list-item six">

                    <h4 class="item-title">@lang('technology/magic_mirror.scene.list.5')</h4>

                </div>

            </div>

        </div>

    </section>
    <!-- 应用场景 end-->

@endsection

@section('script')

    <script type="text/javascript" src="{{asset('js/magic_mirror.js')}}"></script>

@endsection